<style>
	body{
		  background-color: cadetblue;
          padding: 20px; 
		  
	}
    	    

	ul li{

		list-style:none;
		margin-left:0;
        
        padding-left: 10px;
   }
    .white{
		   color: white;
        font-family: sans-serif;
}
.blue{
	color:blue;
}
  #ClickId{  
	         background-color: lightgreen;
             font-family: Georgia;
             font-weight: bolder;
             text-transform: uppercase;
             width: 200px;
              border: 2px solid green;
}
   .sim{
		     color: wheat;
		 } 
	 #case{
		 font-style:italic;} 
     #vac{
		 padding-top: 20px;
		 color: wheat;
         font-size: 25px;
         text-align: center;
         text-transform: uppercase;
         font-weight: bolder;
		 }   
	.pra{
		    color: wheat;
            font-size: 25px;
            text-align: center;
            font-weight: bolder;

		}	
	.pr{
		    color: wheat;
            font-size: 30px;
            text-align: center;
            font-weight: bolder;
            font-family: monospace;
            }	 
     #diff{
		 text-transform: uppercase;
		 
		 color:green; 
		 text-align:right;
		 float:right;
		 }
	#di{

		 color:wheat;
		 text-align:right;
		 font-weight:bolder;
		 float:right;
		 } 
	#ClickId:hover{
		  background-color: blue;
          font-family: Georgia;
          font-weight: bolder;
          text-transform: uppercase;
          }	       
       .priceDiv{
		   padding-bottom:10px;
		   background-color:lightseagreen;
		   width: 300px;
	   }
          </style>

<fieldset>
	<legend>Hi Jquery !!</legend>
<h1 class="white">vacation packages</h1>
<h2 class="sim">jquery air atlantic</h2>
<div id="inner">
	<div class="priceDiv">	
		<ul>
			<li id="vac">vacations</li>
			
			<li class="white">comments on this deal </li>
			<li id="case">"Amazing deals!!"</li>
			<li id="case" >"Can't wait to this trip!!"</li>
			
			<li style="background:cyan">
				<input type="button" id="ClickId" name="price" value="get price">
			</li>
			
		</ul>
	</div>
	<p class="pra">Call Us At 1-555-jquery-air to make a reservation today!!</p>&nbsp
	&nbsp;
	<p class="pr">Now the price will be shown when we click the button..</p>
	<div>
		<span id="di">jQuery</span>
		<span id="diff">try</span>
	</div>
</div>

	Hello
</fieldset>
<script src="lib.js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//$('ul li:last').css('padding-bottom','20px'); 
		$('#ClickId').on('click',function(){
			var price=$('<li style="color:red">From 399.99 Rs</li>');
			var obj = $(this);
			obj.closest('ul').append(price);
			obj.closest('ul').find('.white').removeClass('white').addClass('blue');			
			obj.closest('li').remove();

		});
   });
	

</script>
